<template>
  <view class="main">
    <u--form
      labelPosition="left"
      :model="model1"
      :rules="rules"
      ref="form1"
		>
      <view class="basics">
        <u--text type="info" text="基础信息"></u--text>
        <u-form-item
          label="姓名"
          prop="userInfo.name"
          borderBottom
          ref="item1"
          
        >
          <u--input
              v-model="model1.userInfo.name"
              border="none"
          ></u--input>
        </u-form-item>

        <u-form-item
          label="性别"
          prop="userInfo.sex"
          borderBottom
          @click="showSex = true"
          ref="item1"
        >
          <u--input
              v-model="model1.userInfo.sex"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择性别"
              border="none"
          ></u--input>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>

        <u-form-item
          label="生日"
          prop=""
          borderBottom
          @click="showDay = true"
          ref="item1"
        >
          <u--input
              v-model="model1.userInfo.day"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择生日(选填)"
              border="none"
          ></u--input>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
      </view>

      <view class="history">
        <u--text type="info" text="病史"></u--text>
        <u-form-item
          prop=""
          borderBottom
          @click="showIllness = true"
          ref="item1"
        >
          <u--input
              v-model="model1.userInfo.Illness"
              placeholder="高血压"
              border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          prop=""
          borderBottom
          @click="showHeart = true"
          ref="item1"
        >
          <u--input
              v-model="model1.userInfo.heart"
              placeholder="心脏病"
              border="none"
          ></u--input>
        </u-form-item>
      </view>

      <view class="scale">
        <view class="height">
          身高：{{model1.userInfo.value}}CM
        </view>
        <slide-choose :width="92" :bigItemWidth="5" :littleItemWidth="5" v-model="model1.userInfo.value" height="130rpx"
        :cellWidth="20" :cells="5" :cellNum="1" :startNum="50" :endNum="200" bgColor="#5E78FF"
        color="#fff" :bigItemHeight="20" :littleItemHeight="20" selColor="#9AAAC0" align="flex-end" numPos="top" ref="slide"></slide-choose>
      
        <view class="height heiBot">
          体重：{{model1.userInfo.weight}}KG
        </view>
        <slide-choose :width="92" :bigItemWidth="5" :littleItemWidth="5" v-model="model1.userInfo.weight" height="130rpx"
        :cellWidth="20" :cells="5" :cellNum=".5" :startNum="40" :endNum="150" bgColor="#5E78FF"
        color="#fff" :bigItemHeight="20" :littleItemHeight="20" selColor="#9AAAC0" align="flex-end" numPos="top" ref="slide"></slide-choose>
      </view>
    </u--form>

    <view class="but">
      <u-button color="#5171FF" shape="circle" text="确认" @tap="formData"></u-button>
    </view>

    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
		>
		</u-action-sheet>
    <u-action-sheet
      :show="showIllness"
      :actions="actions2"
      title="有无高血压疾病史"
      @close="showIllness = false"
      @select="illnessSelect"
		>
		</u-action-sheet>
    <u-action-sheet
      :show="showHeart"
      :actions="actions2"
      title="有无心脏病疾病史"
      @close="showHeart = false"
      @select="heartSelect"
		>
		</u-action-sheet>
    <u-datetime-picker
      :show="showDay"
      @cancel="showDay = !showDay"
      @confirm="pickerDate"
      mode="date"
    ></u-datetime-picker>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import slideChoose from '@/subpage/dlm-slide-choose/dlm-slide-choose.vue';

export default {
  components: {
    slideChoose
  },
  data() {
    return {
      showSex: false,
      showDay: false,
      showIllness: false,
      showHeart: false,
			model1: {
				userInfo: {
					name: '',
					sex: '',
          day: '',
          Illness: '',
          heart: '',
          value: 160,
          weight: 60
				},
			},
			actions: [{
				name: '男',
				},
				{
					name: '女',
				},
			],
			actions2: [{
				name: '没有',
				},
				{
					name: '有',
				},
        {
          name: '不清楚'
        }
			],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
          min: 2,
					message: '请填写正确的姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
    }
  },
  methods: {
    sexSelect (e) {
      this.model1.userInfo.sex = e.name
      this.$refs.form1.validateField('userInfo.sex')
    },
    illnessSelect (e) {
      this.model1.userInfo.Illness = e.name
    },
    heartSelect (e) {
      this.model1.userInfo.heart = e.name
    },
    pickerDate (e) {
      this.model1.userInfo.day = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
      this.showDay = !this.showDay
    },
    formData () {
      let that = this
      let mod = this.model1.userInfo
      if(!/^[\u4e00-\u9fa5]{2,}$/.test(mod.name)) {
        this.$refs.uToast.show({
          type: 'error',
          title: '默认主题',
          message: "请正确填写名字"
        })
      } else if(!mod.sex) {
        this.$refs.uToast.show({
          type: 'error',
          title: '默认主题',
          message: "请选择性别"
        })
      } else if(!mod.Illness || !mod.heart) {
        this.$refs.uToast.show({
          type: 'error',
          title: '默认主题',
          message: "请选择病史"
        })
      } else if(mod.value == 160 && mod.weight == 60) {
        uni.showModal({
          title: '提示',
          content: '请问身高和体重默认值吗',
          success: function (res) {
            if (res.confirm) {
              that.$refs.uToast.show({
                type: 'success',
                message: '新增成功',
                iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
                complete() {
                  uni.navigateTo({
                    url: '/pages/successfully/successfully'
                  })
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '请问身高和体重默认值吗',
          success: function (res) {
            if (res.confirm) {
              that.$refs.uToast.show({
                type: 'success',
                message: '新增成功',
                iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
                complete() {
                  uni.navigateTo({
                    url: '/pages/successfully/successfully'
                  })
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .main {
    padding: 20rpx 30rpx;
    .basics {
      margin-bottom: 30rpx;
    }
    .scale {
      margin-top: 40rpx;
      .height {
        text-align: center;
        color: #5E78FF;
        margin-bottom: 20rpx;
      }
      .heiBot {
        margin-top: 20rpx;
      }
    }
    .but {
      margin-top: 30rpx;
    }
  }
</style>